<template>
  <el-dialog v-model="showDialog" title="绘制椭圆设置" width="350" draggable :modal="false" overflow
    :close-on-click-modal="false" :append-to-body="true" :id="props.dioid" :style="{
      top: '15%',
      left: '6%',
      margin: '0',
      maxHeight: '700px',
      overflow: 'auto',
    }" :align-center="false" @close="onCancel">
    <el-form :model="props.circularfrom" label-width="80px">
      <el-form-item label="类型:">
        <el-input v-model="props.circularfrom.Leixing"> </el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="props.circularfrom.LayerName" />
      </el-form-item>
      <div>
        <label>中心点</label>
        <el-form-item label="经度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Lon" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Lat" />
        </el-form-item>
        <el-form-item label="高度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Alt" />
        </el-form-item>
      </div>
      <!--  -->
      <div>
        <el-form-item label="长半轴">
          <el-input @change="changefrom('LongHalfAxis')" type="number" v-model="props.circularfrom.LongHalfAxis" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="短半轴">
          <el-input @change="changefrom('ShortHalfAxis')" type="number" v-model="props.circularfrom.ShortHalfAxis" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="旋转角度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.Heading" />
        </el-form-item>
      </div>

      <!-- <el-form-item label="线型">
        <el-select @change="changefrom" v-model="props.circularfrom.Style.LineStyle" placeholder="请选择">
          <el-option label="实线" value="0" />
          <el-option label="虚线" value="1" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="线宽">
        <el-input-number @change="changefrom" :min="1" v-model="props.circularfrom.Style.LineWidth" />
      </el-form-item> -->
      <!-- <el-form-item label="线颜色">
        <el-color-picker @active-change="linechangecolor" @blur='changefrom'
          v-model="props.circularfrom.Style.lineColorData" show-alpha />
      </el-form-item> -->
      <!-- <el-form-item label="线型">
        <el-select @change="changefrom" v-model="props.circularfrom.Style.LineStyle" placeholder="请选择">
          <el-option label="实线" value="0" />
          <el-option label="虚线" value="1" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="线宽">
        <el-input-number @change="changefrom" :min="1" v-model="props.circularfrom.Style.LineWidth" />
      </el-form-item>
      <el-form-item label="线颜色">
        <el-color-picker @active-change="linechangecolor" @blur='changefrom'
          v-model="props.circularfrom.Style.lineColorData" show-alpha />
      </el-form-item> -->
      <el-form-item label="填充颜色">
        <el-color-picker @active-change="changecolor" @blur='changefrom' v-model="props.circularfrom.Style.ColorData"
          show-alpha />
      </el-form-item>
      <el-form-item label="描述">
        <el-input :autosize="{ minRows: 2 }" type="textarea" v-model="props.circularfrom.DesValue" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
import { ElMessage } from 'element-plus'
import { ColorStyle } from '@/utils/compnt.js'
import { postAddEllipse, putEllipse } from "@/api";
const { proxy } = getCurrentInstance();
const props = defineProps({
  showDrawDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: "",
  },
  circularfrom: {
    type: Object,
    default: () => { },
  },
  isapi: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['circularfromcol'])



const submitForm = async () => {
  console.log('props.circularfrom', props.circularfrom)
  // Cesium.Cartesian3.distance(Pointarr[0], Pointarr[1]);
  props.circularfrom.CenterP = {

    Alt: Number(props.circularfrom.CenterP.Alt),
    Lat: Number(props.circularfrom.CenterP.Lat),
    Lon: Number(props.circularfrom.CenterP.Lon),

  }

  // let CenterP = Cesium.Cartesian3.fromDegrees(
  //   Number(props.circularfrom.CenterP.Lon),
  //   Number(props.circularfrom.CenterP.Lat),
  //   Number(props.circularfrom.CenterP.Alt)
  // )

  // let Radiuslot = Cesium.Cartesian3.fromDegrees(
  //   Number(props.circularfrom.Radiuslot.Lon),
  //   Number(props.circularfrom.Radiuslot.Lat),
  //   Number(props.circularfrom.Radiuslot.Alt)
  // )


  // props.circularfrom.Radius = Cesium.Cartesian3.distance(CenterP, Radiuslot);
  try {
    if (props.isapi) {
      await putEllipse(props.circularfrom)
    } else {
      await postAddEllipse(props.circularfrom)
    }
    
    proxy.$mitt.emit("getsubmit")

    onCancel()
    // 可以在这里处理响应数据
  } catch (error) {
    console.error("请求失败:", error);
    // 可以在这里处理错误信息
  }

};
const onCancel = () => {
  const event = new CustomEvent("draw-ellipse-cancel");
  window.dispatchEvent(event);
};
//===========================

const showDialog = ref(props.showDrawDialog);
// 监听 props 变化以同步本地状态
watch(
  () => props.showDrawDialog,
  (newValue) => {
    console.log('asdada', newValue)
    showDialog.value = newValue;
  }
);




const changecolor = (color) => {
  props.circularfrom.Style.ColorData = color
  props.circularfrom.Style.FillColor = ColorStyle(color, 1)
}
const linechangecolor = (color) => {
  props.circularfrom.Style.lineColorData = color
  props.circularfrom.Style.LineColor = ColorStyle(color, 1)
}
const lastLongHalfAxis = ref(0);
const lastShortHalfAxis = ref(0);
const changefrom = (field) => {
  const longVal = Number(props.circularfrom.LongHalfAxis);
  const shortVal = Number(props.circularfrom.ShortHalfAxis);

  if (field === 'LongHalfAxis') {
    if (longVal < shortVal) {
      ElMessage.warning("长半轴不能小于短半轴");
      // 恢复长半轴为上一次合法值
      props.circularfrom.LongHalfAxis = lastLongHalfAxis.value;
      return;
    } else {
      lastLongHalfAxis.value = longVal;
    }
  } else if (field === 'ShortHalfAxis') {
    if (shortVal > longVal) {
      ElMessage.warning("短半轴不能大于长半轴");
      // 恢复短半轴为上一次合法值
      props.circularfrom.ShortHalfAxis = lastShortHalfAxis.value;
      return;
    } else {
      lastShortHalfAxis.value = shortVal;
    }
  }

  emits('circularfromcol', props.circularfrom);
}

</script>